<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  //生命周期钩子函数
  //beforeCreate-在初始化事件和生命周期之后执行
  // beforeCreate: {},
  //created-在初始化属性和响应式之后执行
  // created: {},
  //渲染template模板之后执行
  // beforeMount: {},
  mounted() {
    //接口测试
    axios({
      method: 'get',
      url: 'http://www.yiketianqi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz',
      // data: {
      //   firstName: 'Fred',
      //   lastName: 'Flintstone'
      // }
    }).then(function (response) {
      console.log(response.data)
      // console.log(response.status);
      // console.log(response.statusText);
      // console.log(response.headers);
      // console.log(response.config);
    })
  },
  //事件发生变化-响应之前调用beforeUpdate
  // beforeUpdate: {},
  //事件发生变化-响应之后调用Updated
  // updated: {},
  //destroy方法调用之前,boforeDestroy
  // beforeDestroy: {},
  //destroy方法调用之后,destroyed
  // destroyed: {},
  //事件处理方法
  methods: {},
  //计算属性-处理模板数据的值(格式转换操作)-计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
  computed: {},
  //当需要在数据变化时执行异步或开销较大的操作时,侦听器更加适用
  watch: {},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
